<template>
	<view v-if="isRender">
		<view class="subsection-box">
			<view :class="selectSubsection == item ? 'item active' : 'item'" @click="goPage('/pages/my/releaseAds/buy')"
				v-for="(item,index) in list" :key="index">
				{{getStr(item)}}
			</view>
		</view>
		<view class="select-cards">
			<view class="title-box">
				{{getStr('my.releaseAds.buy.selectCards')}}
				<image src="/static/images1/index/select-icon.png" style="width: 24rpx; height: 24rpx;"
					@click="goPage('/pages/my/releaseAds/mybag1?source=sell')"></image>
			</view>
			<view v-if="!formData.cards" class="img-box" @click="goPage('/pages/my/releaseAds/mybag1?source=sell')">
				<!-- <image :src="formData.cards.img" style="width: 280rpx;height: 280rpx;"></image> -->
				<image src="/static/images1/index/default-img-icon.png" style="width: 40rpx; height: 40rpx;">
				</image>
			</view>
			<view v-if="formData.cards" class="img-box">
				<image :src="'/static/xz/thumb/'+formData.cards.cardId+'.png'"
					style="width: 146rpx; height: 225rpx;border-radius: 12rpx;margin: 0 auto;"></image>
			</view>

		</view>
		<view class="form-box">
			<u-form labelPosition="top" :labelWidth="200" :model="formData">
				<u-form-item :label="getStr('my.releaseAds.sel.currentPrice')" prop="currentPrice">
					<u-input v-model="formData.currentPrice" disabledColor="#262930" readonly
						:placeholder="getStr('my.releaseAds.sel.currentPrice.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" border="none">
						<!-- <template #suffix>
							<up-copy :content="formData.currentPrice">
								<image src="/static/images1/index/select-icon.png" style="width: 24rpx; height: 24rpx;"></image>
							</up-copy>
						</template> -->
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.releaseAds.buy.eachIncrease')" prop="eachIncrease">
					<u-input v-model="formData.eachIncrease" disabledColor="#262930" readonly
						:placeholder="getStr('my.releaseAds.buy.eachIncrease.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" border="none">
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.releaseAds.sel.currentTurnover')" prop="currentTurnover">
					<u-input v-model="formData.currentTurnover" disabledColor="#262930" readonly
						:placeholder="getStr('my.releaseAds.sel.currentTurnover.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" border="none"></u-input>
				</u-form-item>
			</u-form>
		</view>

		<view class="btn-box">
			<sysButton :text="getStr('publish')" :handleChange="()=>pushAdSellFn()"></sysButton>
		</view>

	</view>
</template>

<script setup>
	import sysButton from '@/components/sysButton/index.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		pushAdSell
	} from '@/common/api/common.js'

	const isRender = ref(true)
	const list = ref(['buy', 'sell'])
	const selectSubsection = ref('sell')

	const formData = reactive({
		cards: null,
		currentPrice: '',
		eachIncrease: '',
		currentTurnover: ''
	})

	const pushAdSellFn = async () => {
		const res = await pushAdSell({
			telegramId: uni.getStorageSync('telegramId'),
			userCardId: formData?.cards?.id || ''
		})
		if (res.code == 200) {
			uni.$u.toast(getStr('toast.successfully'))
			uni.switchTab({
				url: '/pages/my/index'
			})
		} else {
			uni.$u.toast(res.message)
		}
	}

	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	onLoad((options) => {
		if (options.card) {
			const data = JSON.parse(options.card)
			formData.currentPrice = data.currentPrice
			formData.eachIncrease = data.cardGrowthRate * 100 + '%'
			formData.currentTurnover = data.turnoverNumber;
			formData.cards = data
			console.log(formData, 'SHU')
		}
	})
	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.subsection-box {
		width: calc(100vw - 144rpx - 144rpx);
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #272A2F;
		border-radius: 12rpx;
		padding: 8rpx;
		box-sizing: border-box;
		margin: 28rpx auto 0;

		.item {
			width: 50%;
			height: calc(84rpx - 8rpx - 8rpx);
			color: #ffffff;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.active {
			background: #1C1F24;
		}
	}

	.select-cards {
		padding: 56rpx 28rpx 0;

		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			font-size: 34rpx;
			color: #FFFFFF;
		}

		.img-box {
			width: 280rpx;
			height: 280rpx;
			margin: 24rpx auto 0;
			background-color: #262930;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.form-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding-top: 56rpx;
		margin: 0 auto;

		::v-deep .u-form-item {
			margin-bottom: 20rpx;

			text {}
		}
		
		::v-deep .u-form-item__body__left__content__label{
			color: #ffffff;
		}

		::v-deep .u-form-item__body__left {
			margin-bottom: 24rpx;
		}

		::v-deep .u-form-item {
			margin-bottom: 0;
		}

		::v-deep .u-form-item__body {
			padding: 0 0 50rpx;
		}

		::v-deep .u-input {
			background-color: #262930;
			height: 88rpx;
			padding: 0 18rpx 0 28rpx !important;
			box-sizing: border-box;
			font-size: 28rpx;
		}
	}

	.btn-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 0 auto;
	}
</style>